<template>
	<fui-input placeholder="请输入验证码" label="验证码" label-size="26" placeholderStyle="fontSize:26rpx" :value="smsCode" @input="handleInput">
		<ThemeButton
			:text="buttonText"
			:plain="true"
			shape="circle"
			@click="sendSms"
			:customTextStyle="{ fontSize: '20rpx' }"
			:customStyle="{ padding: '20rpx 30rpx', boxSizing: 'border-box' }"
			size="mini"
			:disabled="isSending"
		/>
	</fui-input>
</template>

<script>
import { sendSmsApi, resetPwdApi } from '@/api/agentApi/setting.js';
export default {
	name: 'inputCode',
	props: {
		smsCode: {
			type: String,
			default: ''
		},
		phone: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			text: '', // 输入框的值
			password: true, // 可选的密码显示状态
			buttonText: '获取验证码', // 按钮文本
			isSending: false, // 是否正在发送验证码
			countdown: 60, // 倒计时的秒数
			timer: null // 计时器
		};
	},
	methods: {
		handleInput(e) {
			this.$emit('update:smsCode', e); // 更新父组件的值
		},
		// 发送验证码
		async sendSms() {
			if (!this.phone) {
				uni.showToast({
					title: '账号不能为空',
					icon: 'none'
				});
				return;
			}
			if (!/^1[3-9]\d{9}$/.test(this.phone)) {
				uni.showToast({
					title: '请输入正确的手机号格式',
					icon: 'none'
				});
				return;
			}
			if (this.isSending) return; // 如果正在发送，直接返回
			this.isSending = true; // 标记正在发送验证码
			try {
				let data = {
					areaCode: '',
					phone: this.phone
				};
				let res = await sendSmsApi(data);
				console.log(res.data);
				// 模拟请求成功，开始倒计时
				this.startCountdown(data);
			} catch (error) {
				console.error('验证码发送失败', error);
			} finally {
				this.isSending = false; // 结束发送状态
			}
		},
		// 开始倒计时
		startCountdown() {
			this.countdown = 60; // 重置倒计时
			this.buttonText = `${this.countdown}s`; // 显示倒计时
			this.timer = setInterval(() => {
				this.countdown -= 1;
				this.buttonText = `${this.countdown}s`;
				if (this.countdown <= 0) {
					clearInterval(this.timer);
					this.buttonText = '获取验证码'; // 恢复按钮文本
				}
			}, 1000);
		}
	},
	watch: {
		text(val) {
			this.$emit('update:modelValue', val);
		}
	},
	beforeDestroy() {
		// 清理计时器，避免内存泄漏
		if (this.timer) {
			clearInterval(this.timer);
		}
	}
};
</script>

<style scoped>
/* 可以根据需要调整样式 */
</style>
